import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import moment from 'moment';

import {
    Actions
} from 'react-native-router-flux';

import {
    FromUser,
    MessageItem
} from './types';

import parseUrl from './../../utils/parseUrl';

import {
    Press,
    Avatar
} from './../../components';

interface Props {
    userId: number,
    data: MessageItem,
    onReSend:Function,
    onAvatarClick:Function,
    onBodyClick:Function
}

import MsgTex from './msgText';
import ImageMsg from './msgImg';
import ProfileMsg from './msgProfile';

import MsgStatus from './status';

const Contents:any = {
    text: MsgTex,
    image: ImageMsg,
    profile: ProfileMsg,
    voice:MsgTex
}

class MsgRow extends PureComponent<Props> {
    static defaultProps = {
        data: {},
        userId: 0,
        onReSend:() => null,
        onBodyClick:() => null,
        onAvatarClick:() => null
    }

    get Data(): MessageItem {
        const {
            data
        } = this.props;
        return data;
    }

    get time() {
        const {
            sentTime=0
        } = this.Data;
        return moment(
            sentTime * 1000
        ).format(`MMM DD, YYYY HH:mm`);
    }

    get fromUser(): FromUser {
        const {
            fromUser
        } = this.Data;
        return fromUser;
    }

    get avatar() {
        const {
            avatarPath
        } = this.fromUser;
        return parseUrl(avatarPath);
    }

    get msgStatus():any {
        const {
            status
        } = this.Data;
        return status;
    }

    get rowUserId() {
        const {
            userId=0
        } = this.fromUser;
        return ~~userId;
    }

    get mySelf() {
        const {
            userId
        } = this.props;
        return this.rowUserId === ~~userId;
    }

    get bodyStyle() {
        const _styles = (
            [styles.body]
        )
        if (this.mySelf) {
            _styles.push(
                styles.bodyReverse
            )
        }
        return _styles;
    }

    get contentStyle() {
        const _styles = (
            [styles.bodyContent]
        )

        _styles.push(
            this.mySelf ? styles.flexEnd :
                styles.flexStart
        )

        return _styles;
    }

    get messageTypeElement() {
        const {
            msgType=`text`
        } = this.Data;

        const Content = (
            Contents[msgType]
        ) || View;

        return (
            <Content
                data={this.Data}
                mySelf={this.mySelf}
            />
        )
    }

    private _onReSend = () => {
        const {
            onReSend
        } = this.props;
        onReSend(this.Data)
    }

    private _onAvatarPress = () => {
        const {
            onAvatarClick
        } = this.props;
        onAvatarClick(this.mySelf);

        if(!this.mySelf) {
            Actions.push(`/profile/:userId`,{
                userId:this.rowUserId
            })
        }
    }

    render() {
        const _status = (
            <MsgStatus
                status={this.msgStatus}
                onStatusClick={this._onReSend}
            />
        )
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.created}>
                        {this.time}
                    </Text>
                </View>
                <View style={this.bodyStyle}>
                    <Press onPress={this._onAvatarPress}>
                        <Avatar
                            size={48}
                            url={this.avatar}
                        />
                    </Press>
                    <View style={this.contentStyle}>
                        {this.mySelf ?_status:null}
                        {this.messageTypeElement}
                        {!this.mySelf ?_status:null}
                    </View>
                </View>
            </View>
        )
    }
}

export default MsgRow;

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: 16,
        marginBottom: 16
    },
    header: {
        height: 40,
        alignItems: `center`,
        justifyContent: `center`
    },
    created: {
        fontSize: 12,
        color: `#999`
    },
    body: {
        flexDirection: `row`
    },
    bodyReverse: {
        flexDirection: `row-reverse`
    },
    bodyContent: {
        flex: 1,
        alignItems:`center`,
        flexDirection:`row`,
        paddingHorizontal: 10
    },
    flexStart: {
        paddingRight:36,
        justifyContent: `flex-start`
    },
    flexEnd: {
        paddingLeft:36,
        justifyContent: `flex-end`
    }
}) as any;